<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" width="964px">
      <div slot="title">
        <b class="def-b">{{ title }}</b>
      </div>
      <div v-loading="loading">
        <div class="form-seach">
          <el-form ref="form" :model="BindForm" label-width="80px" label-position="left">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="服务名称:" prop="serviceName" class="form-item">
                  <el-input v-model="BindForm.serviceName" placeholder="请输入服务名称" maxlength="30" class="cus-input" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="服务分类:" prop="type" class="form-item">
                  <select-service-type v-model="BindForm.type" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="服务状态:" prop="serviceState" class="form-item">
                  <el-select v-model="BindForm.serviceState" :disabled="isParts" clearable filterable placeholder="请选择服务状态">
                    <el-option label="销售中" value="saling" />
                    <el-option label="未销售" value="notSold" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item class="form-item">
              <el-button type="primary" @click="search">筛选</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="dialogVisible" class="ele-table">
          <el-table :data="BindTable" highlight-current-row border max-height="280" :empty-text="loading ? '数据加载中' : (isSearch ? '未找到相关的服务' : '暂无服务')" @current-change="handleCurrentChange">
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="80"
              :resizable="false"
              fixed="left"
            />
            <el-table-column
              label="服务编号"
              prop="id"
              align="center"
              width="130"
              :resizable="false"
              fixed="left"
            />
            <el-table-column label="服务主图" align="center" :resizable="false" width="80">
              <template slot-scope="scope">
                <TableColumnGoodsImage :src="JSON.parse(scope.row.serviceImage)[0]" />
              </template>
            </el-table-column>
            <el-table-column
              label="服务名称"
              prop="name"
              align="center"
              :resizable="false"
            />
            <el-table-column
              label="服务状态"
              prop="state"
              align="center"
              width="90"
              :resizable="false"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.stat === 0" type="info" size="small">未销售</el-tag>
                <el-tag v-else-if="scope.row.stat === 1" type="success" size="small">销售中</el-tag>
                <el-tag v-else type="info" size="small">未知</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              header-align="center"
              align="center"
              fixed="right"
              width="100"
              :resizable="false"
            >
              <template slot-scope="scope">
                <el-button size="small" type="primary" @click="select(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <div />
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="limit"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="pageSizeChange"
            @current-change="currentPageChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SelectServiceType from '../SelectServiceCategory/index'
import { onlineServiceList } from '@/api/service'
import { getShopID } from '@/utils/auth'
import TableColumnGoodsImage from '../TableColumnGoodsImage/index'

export default {
  name: 'SelectGoodsDialog',
  components: { TableColumnGoodsImage, SelectServiceType },
  props: {
    title: {
      type: String,
      default: '请选择服务'
    },
    serviceState: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      isParts: false,
      dialogVisible: false,
      page: 1,
      limit: 10,
      total: 0,
      loading: false,
      isSearch: false,
      BindForm: {
        serviceName: null,
        type: null,
        serviceState: null
      },
      BindTable: []
    }
  },
  mounted() {
    if (this.serviceState === 'saling') {
      this.BindForm.serviceState = 'saling'
      this.isParts = true
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.resetForm()
      })
    },
    resetForm() {
      const vm = this
      vm.$refs.form.resetFields()
      vm.reloadTableData()
    },
    search() {
      const vm = this
      vm.reloadTableData()
    },
    pageSizeChange(pageSize) {
      const vm = this

      vm.limit = pageSize

      vm.reloadTableData()
    },
    currentPageChange(page) {
      const vm = this

      vm.page = page

      vm.loadTableData()
    },
    reloadTableData() {
      const vm = this

      vm.page = 1
      vm.total = 0
      vm.BindTable = []
      vm.loadTableData()
    },
    loadTableData() {
      const vm = this

      vm.isSearch = false

      const data = {
        shopId: getShopID(),
        serviceName: '',
        serviceTypeId: '',
        serviceState: 'allService',
        page: vm.page,
        limit: vm.limit
      }

      if (vm.BindForm.serviceName && vm.BindForm.serviceName.length > 0) {
        data['serviceName'] = vm.BindForm.serviceName
        vm.isSearch = true
      }

      if (vm.BindForm.serviceState && vm.BindForm.serviceState.length > 0) {
        data['serviceState'] = vm.BindForm.serviceState
        vm.isSearch = true
      }

      if (vm.BindForm.type && vm.BindForm.type.length > 0) {
        if (vm.BindForm.type && vm.BindForm.type.length === 2) {
          // data['serviceType'] = vm.BindForm.type[0]
          data['serviceTypeId'] = vm.BindForm.type[1]
          vm.isSearch = true
        } else {
          data['serviceTypeId'] = vm.BindForm.type[0]
          vm.isSearch = true
        }
      }

      vm.loading = true
      onlineServiceList(data).then(res => {
        vm.loading = false
        vm.total = res.data.data.total
        vm.BindTable = res.data.data.data ? res.data.data.data : []
      }).catch(res => {
        vm.loading = false
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    },
    handleCurrentChange(val) {
      this.dialogVisible = false
      this.$emit('select', val)
    },
    select(val) {
      this.dialogVisible = false
      this.$emit('select', val)
    }
  }
}
</script>

<style lang="scss" scoped>
  .def-b {
    border-left: 4px solid rgb(55, 131, 255);
    padding-left: 10px;
  }

  .form-seach {
    padding: 20px 30px;
    padding-bottom: 0px;
    margin-bottom: 30px;
    border: 1px solid #eeeeee;

    .form-item {
      margin-bottom: 22px !important;
    }

  }

  .ele-table {
    margin-bottom: 30px;
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

</style>
